<template>
  <div class="loginBody">
    <div class="container">
      <div class="leftbox"></div>
      <div class="rightbox" v-show="zheLoginShow">
        <div class="form">
          <div class="formTitle">智路通</div>
          <div class="formBox">
            欢迎登录
            <el-form
              label-position="top"
              ref="ruleFormRef"
              :rules="rules"
              label-width="100px"
              :model="formLabelAlign"
              style="max-width: 460px"
            >
              <el-form-item label="账号：" prop="loginName">
                <el-input
                  v-model="formLabelAlign.loginName"
                  @change="getImgae"
                  placeholder="请输入账号"
                />
              </el-form-item>
              <el-form-item label="密码：" prop="loginPwd">
                <el-input
                  v-model="formLabelAlign.loginPwd"
                  type="password"
                  show-password
                  placeholder="请输入密码"
                />
              </el-form-item>
              <el-form-item label="验证码：" prop="captcha">
                <el-input v-model="formLabelAlign.captcha" placeholder="请输入验证码" />
              </el-form-item>
              <el-form-item>
                <img :src="codeImg" style="width: 100%; height: 100px" @click="getImgae" />
              </el-form-item>
            </el-form>
            <el-button type="primary" style="width: 100%; height: 45px" @click="denglu(ruleFormRef)"
              >登录</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
import { login, captchaImage, getTestToken } from "@/api/login.js";
import { useUserStore } from "@/store/user";
import { ElMessage, ElMessageBox } from "element-plus";
const userStore = useUserStore();
let timer = null;
const router = useRouter();
let ruleFormRef = ref(null);
let codeImg = ref("");
let zheLoginShow = ref(true);
let access_token = ref("");
let vite_test = ref("");
const formLabelAlign = reactive({
  loginName: "",
  loginPwd: "",
  captcha: ""
});
const rules = reactive({
  loginName: [{ required: true, message: "请输入名称", trigger: "blur" }],
  loginPwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
  captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }]
});

const getImgae = () => {
  let params = {
    loginName: formLabelAlign.loginName ? formLabelAlign.loginName : "dev",
    width: 250,
    height: 100,
    length: 2
  };
  captchaImage(params).then((res) => {
    codeImg.value = res.data;
  });
};

const denglu = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      login(formLabelAlign).then((res) => {
        if (res.data) {
          ElMessage({
            message: "登录成功",
            type: "success",
            duration: 1000
          });
          sessionStorage.setItem("token", res.data.token);
          sessionStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
          // router.push('/randomCheck/institution')
          router.push("/about");
        } else {
          ElMessage({
            message: res.msg,
            type: "info",
            duration: 1000
          });
          getImgae();
        }
      });
    } else {
    }
  });
};

onMounted(() => {
  getImgae();
});
onBeforeUnmount(() => {});
</script>

<style lang="less" scoped>
.loginBody {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  background: url("@/assets/img/login-bg.jpg");
  background-size: 100% 100%;

  .container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 200px 180px;
    box-sizing: border-box;

    .leftbox {
      // background-color: #fff;
      width: 60%;
      padding-left: 30px;
      font-size: 37px;
      font-weight: 500;
      color: #fff;
      margin-top: -50px;

      .englishText {
        font-size: 25px;
        margin-top: 10px;
      }
    }

    .rightbox {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40%;

      .form {
        width: 400px;
        height: 100%;

        .formTitle {
          text-align: center;
          font-size: 30px;
          font-weight: 700;
          color: #fff;
        }

        .formBox {
          height: 570px;
          width: 100%;
          background-color: #fff;
          margin-top: 10px;
          box-sizing: border-box;
          border-radius: 5px;
          padding: 25px 40px;
          text-align: center;
          font-size: 25px;
          position: relative;

          .qrIcon {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 50px;
            height: 50px;
          }

          :deep(.el-input__inner) {
            height: 45px;
          }
          :deep(.el-form-item__label) {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
